<template>
  <div class="test-container">
    <!-- <vab-query-form>
      <vab-query-form-left-panel :span="12">
        <el-button icon="el-icon-plus" type="primary" @click="handleEdit">
          新增
        </el-button>
        <el-button icon="el-icon-delete" type="danger" @click="handleDelete">
          批量删除
        </el-button>
      </vab-query-form-left-panel>
      <vab-query-form-right-panel :span="12">
        <el-form :inline="true" :model="listQuery" @submit.native.prevent>
          <el-form-item>
            <el-input
              v-model.trim="listQuery.username"
              placeholder="请输入用户名"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="queryData">
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-right-panel>
    </vab-query-form> -->
    <div class="top-main">
      <search :listQuery="listQuery" :path="$route.name"></search>
    </div>
    <div class="bottom-main">
      <div class="list-button-group">
        <div class="button-item">
          <el-button type="primary" icon="el-icon-plus" @click="handleEdit">
            新增
          </el-button>
        </div>
      </div>
      <div class="table-list">
        <el-table
          :data="list"
          :element-loading-text="elementLoadingText"
          @selection-change="setSelectRows"
          highlight-current-row
          height="100%"
          :header-cell-style="{
            'border-bottom': '1px solid #cbcccd',
            'border-top': '1px solid #cbcccd',
          }"
        >
          <el-table-column
            show-overflow-tooltip
            type="selection"
          ></el-table-column>
          <!-- <el-table-column show-overflow-tooltip prop="id" label="id"></el-table-column> -->
          <el-table-column show-overflow-tooltip label="序号" width="50">
            <template #default="scope">
              {{
                scope.$index +
                listQuery.pageSize * (listQuery.pageIndex - 1) +
                1
              }}
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="xingming"
            label="姓名"
          ></el-table-column>
          <el-table-column show-overflow-tooltip prop="xingbie" label="性别">
            <template #default="scope">
              {{ scope.row.xingbie == 1 ? '男' : '女' }}
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="juese"
            label="角色"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="jigou"
            label="机构"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="createName"
            label="创建人"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="createTime"
            label="创建时间"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="操作"
            fixed="right"
            min-width="100"
          >
            <template #default="{ row }">
              <el-button type="text" @click="handleEdit(row)">编辑</el-button>
              <el-button type="text" @click="openPwd(row)">修改密码</el-button>
              <el-button type="text" @click="handleDelete(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        background
        :current-page="listQuery.pageIndex"
        :page-size="listQuery.pageSize"
        :layout="layout"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
    <edit
      ref="edit"
      :jueselist="jueselist"
      :treeList="treeList"
      @fetch-data="fetchData"
    ></edit>
    <el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="30vw">
      <el-form
        :model="form"
        label-position="left"
        :rules="rules"
        ref="ruleForm"
      >
        <el-form-item
          label="旧密码"
          :label-width="formLabelWidth"
          prop="password"
        >
          <el-input
            v-model="form.password"
            show-password
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="新密码"
          :label-width="formLabelWidth"
          prop="newpassword"
        >
          <el-input
            v-model="form.newpassword"
            show-password
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="确认密码"
          :label-width="formLabelWidth"
          prop="surepassword"
        >
          <el-input
            v-model="form.surepassword"
            show-password
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('ruleForm')">取 消</el-button>
        <el-button type="primary" @click="UpdataPwd('ruleForm')">
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  let _listQuery = {
    pageIndex: 1,
    pageSize: 10,
  }

  import Edit from './components/ResourceManagementEdit.vue'
  import search from './components/search.vue'
  import { getUserList, getUserJSList } from '@/api/user'
  import { DelUser } from '@/api/userManagement'
  import { getTree } from '@/api/institution'
  import { CheckPassword, EditUser } from '@/api/userManagement'
  export default {
    name: 'resoureManagement',
    components: { search, Edit },
    data() {
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'))
          // password 是表单上绑定的字段
        } else if (value !== this.form.newpassword) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }
      return {
        listQuery: Object.assign({}, _listQuery),
        list: null,
        listLoading: false,
        layout: 'prev, pager, next, jumper',
        total: 0,
        selectRows: '',
        elementLoadingText: '正在加载...',
        jueselist: [],
        treeList: [],
        formLabelWidth: 120,
        form: {
          password: '',
          surepassword: '',
          newpassword: '',
        },
        dialogFormVisible: false,
        rules: {
          password: [
            { required: true, message: '请输入旧密码', trigger: 'blur' },
          ],
          newpassword: [
            { required: true, message: '请选择新密码', trigger: 'blur' },
            {
              min: 6,
              max: 12,
              message: '长度在 6 到 12 个字符',
              trigger: 'blur',
            },
          ],
          surepassword: [
            { required: true, validator: validatePass2, trigger: 'change' },
          ],
        },
        Selectuser: null,
      }
    },
    created() {
      this.fetchData()
      this.getJSJGList()
    },
    methods: {
      openPwd(row) {
        this.form = {
          password: '',
          newpassword: '',
          surepassword: '',
        }
        this.dialogFormVisible = true
        this.Selectuser = row
      },
      UpdataPwd(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            let res = await CheckPassword({
              password: this.form.password,
              id: this.Selectuser.id,
            })
            if (res.code == 200) {
              let res = await EditUser({
                id: this.Selectuser.id,
                password: this.form.newpassword,
              })
              if (res.code == 200) {
                this.$baseMessage('修改成功', 'success')
                this.dialogFormVisible = false
                this.fetchData()
              }
            }
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
        this.dialogFormVisible = false
      },
      setSelectRows(val) {
        this.selectRows = val
      },
      handleEdit(row) {
        if (row.id) {
          this.$refs['edit'].showEdit(row)
        } else {
          this.$refs['edit'].showEdit()
        }
      },
      async getJSJGList() {
        let listQuery = {
          pageIndex: 1,
          pageSize: 1000,
        }
        let JSres = await getUserJSList(listQuery)
        let JGres = await getTree({ treeId: 0 })
        this.jueselist = JSres.data.rows
        this.treeList = this.$util.getTreeData(JGres.data)
      },
      handleDelete(row) {
        this.$baseConfirm('你确定要删除当前项吗', null, async () => {
          const { msg } = await DelUser({ id: row.id })
          this.$baseMessage('删除成功', 'success')
          this.fetchData()
        })
      },
      handleSizeChange(val) {
        this.listQuery.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.listQuery.pageIndex = val
        this.fetchData()
      },
      queryData() {
        this.listQuery.pageIndex = 1
        this.fetchData()
      },
      async fetchData() {
        const res = await getUserList(this.listQuery)
        this.list = res.data.rows
        this.total = res.data.total
      },
      search() {
        //搜索
        this.listQuery.pageIndex = 1
        this.fetchData()
      },
      resetlist() {
        //重置
        this.listQuery = Object.assign({}, _listQuery)
        this.fetchData()
      },
    },
  }
</script>
<style lang="scss" scoped>
  .test-container {
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    background: #f6f8f9 !important;
    height: 100%;

    .top-main {
      width: 100%;
      background: #fff;
      padding: 10px 0;
    }

    .bottom-main {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;
      background-color: #fff;
      margin-top: 10px;
      padding-bottom: 10px;

      .list-button-group {
        display: flex;
        flex-direction: row;
        padding: 20px;

        .button-item {
          padding: 0px 10px;
        }

        .button-item:first-child,
        &:last-child {
          padding: 0px 10px 0 0;
        }
      }

      .table-list {
        flex: 1;
        padding: 0 20px 20px;
      }
    }

    .el-button {
      font-size: 0.14rem !important;
    }
  }
</style>
